<template>
  <div class="tags-mode-select" v-if="value">
    <template v-if="isMulti">
      <el-tooltip placement="top-start" :disabled="!toolTipVal" :content="toolTipVal">
        <BaseTags :value="multiTags"></BaseTags>
      </el-tooltip>
    </template>
    <template v-else>
      <BaseTags :value="tags"></BaseTags>
    </template>
  </div>
</template>
<script>
import BaseTags from '@src/component/common/BaseTags/index.ts';
import { defineComponent, onMounted, ref, watch, computed } from 'vue';
export default defineComponent({
  name: 'tags-mode-select',
  components: {
    BaseTags,
  },
  props: {
    field: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Array | String,
    },
    maxLength: {
      type: Number,
      default: 2
    }
  },
  setup(props) {
    
    const tags = ref([]);
    const multiTags = ref([]);
    const toolTipVal = ref('');

    const maxLength = computed(() => {
      return props.maxLength;
    })

    const isMulti = computed(() => {
      return props.field?.setting?.isMulti;
    })
    const initData = () => {
      if (Array.isArray(props.value) && isMulti.value) {
        // 多选
        const tagsLength = props.value.length;
        let tempList = props.value?.map(val => {
          return {
            tagName: val,
          };
        });

        if (tagsLength > maxLength.value) {
          toolTipVal.value = props.value.join('，');
          tempList = [...tempList.filter((v, i) => i < maxLength.value), ...[{ tagName: `+${tagsLength - maxLength.value}` }]];
        }
        multiTags.value = tempList;
      } else {
        // 单选
        tags.value = [{ tagName: props.value }];
      }
    }

    watch(
      () => props.value,
      () => {
        initData()
      },
      {
        immediate: true,
        deep: true
      }
    );

    onMounted(() => {
      initData()
    })
    return {
      tags,
      multiTags,
      toolTipVal,
      isMulti,
    };
  },
});
</script>
<style lang="scss" scoped></style>
